<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>备件管理系统 - 出库记录</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.min.js"></script>
</head>
<body>
<div id="app">
    <!-- 页面标题插槽 -->
    <h2 style="display: none;"><slot name="pageTitle">出库记录</slot></h2>

    <!-- 页面头部插槽 -->
    <header class="header">
        <h2 style="margin: 0;">出库记录</h2>
        <!-- 使用外层容器包裹退出按钮 -->
        <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 10px;">
            <el-button type="info" size="small" @click="logout">退出</el-button>
        </div>
    </header>

    <!-- 主体内容插槽 -->
    <main>
        <!-- 新增按钮与搜索框水平排列 -->
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
            <el-button type="primary" @click="showAddDialog = true">新增出库记录</el-button>
            <el-input v-model="searchQuery" placeholder="请输入搜索内容" style="width: 300px;"></el-input>
        </div>

        <!-- 表格 -->
        <el-table :data="filteredOutBoundRecords" border style="width: 100%">
            <el-table-column prop="outboundid" label="ID"></el-table-column>
            <el-table-column prop="sparepartid" label="备件ID"></el-table-column>
            <el-table-column prop="quantity" label="数量"></el-table-column>
            <el-table-column prop="batchNumber" label="批次号"></el-table-column>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="mini" type="primary" icon="EditPen" @click="editOutBoundRecord(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" icon="Delete" @click="deleteOutBoundRecord(scope.row.outboundid)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增表单 -->
        <el-dialog v-model="showAddDialog" title="新增出库记录" width="40%">
            <el-form :model="newOutBoundRecord" label-position="left" label-width="100px" style="max-width: 400px;">
                <el-form-item label="备件ID">
                    <el-input v-model="newOutBoundRecord.sparepartid"></el-input>
                </el-form-item>
                <el-form-item label="数量">
                    <el-input v-model="newOutBoundRecord.quantity"></el-input>
                </el-form-item>
                <el-form-item label="批次号">
                    <el-input v-model="newOutBoundRecord.batchNumber"></el-input>
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker v-model="newOutBoundRecord.date" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-button type="primary" @click="addOutBoundRecord" style="width: 100%">添加</el-button>
            </el-form>
        </el-dialog>

        <!-- 编辑表单 -->
        <el-dialog v-model="showEditDialog" title="编辑出库记录" width="40%">
            <el-form :model="currentEditRecord" label-position="left" label-width="100px" style="max-width: 400px;">
                <el-form-item label="备件ID">
                    <el-input v-model="currentEditRecord.sparepartid"></el-input>
                </el-form-item>
                <el-form-item label="数量">
                    <el-input v-model="currentEditRecord.quantity"></el-input>
                </el-form-item>
                <el-form-item label="批次号">
                    <el-input v-model="currentEditRecord.batchNumber"></el-input>
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker v-model="currentEditRecord.date" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-button type="primary" @click="updateOutBoundRecord" style="width: 100%">更新</el-button>
            </el-form>
        </el-dialog>

        <!-- 底部固定 -->
        <footer class="footer">
            &copy; 2025 备件管理系统 - 版权所有
        </footer>
    </main>
</div>

<script>
    const { createApp } = Vue;
    const apiClient = axios.create({
        //本机地址
        //baseURL: 'http://localhost:8086',
        //服务器 地址
        baseURL: 'http://8.137.85.243:8086',
        timeout: 5000
    });

    const app = createApp({
        data() {
            return {
                outBoundRecordsList: [],
                newOutBoundRecord: { sparepartid: null, quantity: null, batchNumber: '', date: null },
                searchQuery: '',
                showAddDialog: false,
                showEditDialog: false,
                currentEditRecord: {}
            };
        },
        mounted() {
            this.loadOutBoundRecords();
        },
        computed: {
            filteredOutBoundRecords() {
                return this.outBoundRecordsList.filter(record =>
                    record.sparepartid.toString().includes(this.searchQuery) ||
                    record.batchNumber.includes(this.searchQuery)
                );
            }
        },
        methods: {
            async loadOutBoundRecords() {
                const res = await apiClient.get('/api/outboundrecords/listall');
                this.outBoundRecordsList = res.data;
            },
            async deleteOutBoundRecord(id) {
                if (!confirm('确定删除？')) return;
                await apiClient.delete(`/api/outboundrecords/delete/${id}`);
                this.loadOutBoundRecords();
            },
            logout() {
                window.location.href = '/dashboard.html';
            },
            addOutBoundRecord() {
                // 假设当前用户ID为1，实际应根据登录信息动态获取
                this.newOutBoundRecord.userid = 1;
                apiClient.post('/api/outboundrecords/insert', this.newOutBoundRecord)
                    .then(() => {
                        this.showAddDialog = false;
                        // 清空表单内容
                        this.newOutBoundRecord = { sparepartid: null, quantity: null, batchNumber: '', date: null };
                        this.loadOutBoundRecords(); // 刷新列表
                    })
                    .catch(err => {
                        console.error("添加失败:", err);
                        alert("添加出库记录失败，请检查输入或稍后再试");
                    });
            },
            editOutBoundRecord(record) {
                this.currentEditRecord = { ...record };
                this.showEditDialog = true;
            },
            updateOutBoundRecord() {
                apiClient.put(`/api/outboundrecords/update/${this.currentEditRecord.outboundid}`, this.currentEditRecord)
                    .then(() => {
                        this.showEditDialog = false;
                        this.loadOutBoundRecords(); // 刷新列表
                    })
                    .catch(err => {
                        console.error("更新失败:", err);
                        alert("更新出库记录失败，请检查输入或稍后再试");
                    });
            }
        }
    });

    app.use(ElementPlus);
    const { EditPen, Delete } = ElementPlusIconsVue;
    app.component('EditPen', EditPen);
    app.component('Delete', Delete);
    app.mount('#app');
</script>
</body>
</html>